<template>
	<view>
		<view class="lecturer_userInfo  flex_row_start_center">
			<image class="lecturer_userInfo_image" :src="lecturerInfo.expertImage" mode="aspectFit"></image>
			<view>{{lecturerInfo.expertName}}</view>
		</view>
		<view class="lecturer_introduce">
			<view class="lecturer_introduce_title">讲师介绍</view>
			<view class="lecturer_introduce_info">{{lecturerInfo.expertIntro}}</view>
		</view>
		<view class="lecturer_course">
			<view class="lecturer_course_title">代表课程</view>
			<view class="lecturer_course_list">
				<view class="lecturer_course_item" @click="natTo(item)" v-for="(item,index) in lecturerInfo.courseList " :key="index">
					<view>
						<image :src="item.courseImage" mode="aspectFit" class="lecturer_course_item_image"> </image>
						<view class="lecturer_course_item_info">
							<view class="lecturer_course_item_info1" >{{item.courseName}}</view>
							<view class="lecturer_course_item_info2">{{item.courseIntro}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				url:"http://csp-aliyun-oos01.oss-cn-beijing.aliyuncs.com/dongzhiceruoyi/2024/05/15/cd215290-40d5-426e-b46e-9e9a45d7f9fb_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240515151432.png?Expires=2031117292&OSSAccessKeyId=LTAI4GJsWdRydUwzqD1saGFZ&Signature=HlxkpShu8wpzmo0I2Bcd1EtxUlE%3D",
				lecturerInfo:'',
			}
		},
		onLoad(){
			this.getExperInfo(this.$Route.query.expertId)
		},
		methods:{
			// ?expertId=4
			getExperInfo(expertId){
				let param = {}
				param.data = {}
				param.url = 'v3/study/front/expert/team/detail'
				param.method = 'GET'
				param.data.expertId = expertId
				// param.data.videoId = this.videoId
				this.$request(param).then(res => {
					console.log(res);
					this.lecturerInfo=res.data
				})
			},
			natTo(item){
				this.$Router.push({
					path: '/extra/courseinfo/courseinfo',
					query: {
						courseId: item.courseId
					}
				})
			},
			
		}
	}
</script>
<style lang="scss" >  
page{
	background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>  

.lecturer_userInfo{
	background-color: #fff;
	padding: 20rpx 42rpx;
	margin-bottom: 18rpx;
	.lecturer_userInfo_image{
		width: 180rpx;
		height: 180rpx;
		border: 2rpx solid #eee;
		border-radius: 50%;
		margin-right: 24rpx;
	}
}

.lecturer_introduce{
	background-color: #fff;
	padding: 20rpx 32rpx;
	margin-bottom: 12rpx;
	.lecturer_introduce_title{
		font-size: 32rpx;
		margin-bottom: 12rpx;
		font-weight: bold;
	}
	.lecturer_introduce_info{
		color: #9B9B9B;
		font-size: 24rpx;
	}
}

.lecturer_course{
	background-color: #fff;
	padding: 20rpx 32rpx;
	
	.lecturer_course_title{
		font-size: 32rpx;
		margin-bottom: 12rpx;
		font-weight: bold;
	}
	.lecturer_course_list{
		display: flex;
		flex-wrap: wrap;
		.lecturer_course_item{
			width: 336rpx;
			margin-right: 14rpx;
			// background-color: red;
			margin-bottom: 14rpx;
			
			.lecturer_course_item_image{
				width: 338rpx;
				height: 190rpx;
			}
			.lecturer_course_item_info{
				width: 100%;
				padding: 15rpx 5rpx 15rpx 15rpx;
				.lecturer_course_item_info1{
					font-size: 28rpx;
						width: 100%;
					font-weight: bold;
					 white-space: nowrap;   //不换行
					 overflow: hidden;       //超出部分隐藏
					 text-overflow: ellipsis;    //文本溢出显示省略号
				}
				
				.lecturer_course_item_info2{
					margin-top: 8rpx;
						width: 100%;
					font-size: 22rpx;
					color: #9B9B9B;
					overflow: hidden;//溢出隐藏
					text-overflow: ellipsis;//省略号
					display: -webkit-box;//
					-webkit-box-orient: vertical;//设置弹性盒子的子元素的排列方式
					-webkit-line-clamp: 2;//设置显示文本的行数
				}
			}
		}
		.lecturer_course_item:nth-child(2n){
			margin-right: 0;
		}
	}
	
}

</style>